<template>
  <div class="reports-container fade-in">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <el-icon class="title-icon">
              <Document />
            </el-icon>
            报告管理
          </h2>
          <p class="page-subtitle">生成、管理和分发各类业务报告</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="createReport">
            <el-icon><Plus /></el-icon>
            新建报告
          </el-button>
          <el-button type="success" @click="batchExport">
            <el-icon><Download /></el-icon>
            批量导出
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ totalReports }}</div>
                <div class="stat-label">总报告数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ pendingReports }}</div>
                <div class="stat-label">待生成</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ completedReports }}</div>
                <div class="stat-label">已完成</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Share /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ sharedReports }}</div>
                <div class="stat-label">已分享</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <el-card shadow="hover">
        <div class="filter-content">
          <div class="filter-left">
            <el-input
              v-model="searchQuery"
              placeholder="搜索报告名称或描述"
              class="search-input"
              clearable
              prefix-icon="Search"
            />
            <el-select v-model="statusFilter" placeholder="状态筛选" clearable>
              <el-option label="全部状态" value="" />
              <el-option label="草稿" value="draft" />
              <el-option label="生成中" value="generating" />
              <el-option label="已完成" value="completed" />
              <el-option label="已分享" value="shared" />
            </el-select>
            <el-select v-model="typeFilter" placeholder="类型筛选" clearable>
              <el-option label="全部类型" value="" />
              <el-option label="月度报告" value="monthly" />
              <el-option label="季度报告" value="quarterly" />
              <el-option label="年度报告" value="yearly" />
              <el-option label="自定义报告" value="custom" />
            </el-select>
          </div>
          <div class="filter-right">
            <el-button type="primary" plain @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button @click="resetFilters">重置筛选</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 报告列表 -->
    <div class="reports-list">
      <el-card shadow="hover">
        <template #header>
          <div class="list-header">
            <div class="header-left">
              <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
              <span class="selected-count" v-if="selectedReports.length > 0">
                已选择 {{ selectedReports.length }} 项
              </span>
            </div>
            <div class="header-right">
              <el-button 
                type="danger" 
                size="small" 
                :disabled="selectedReports.length === 0"
                @click="batchDelete"
              >
                <el-icon><Delete /></el-icon>
                批量删除
              </el-button>
            </div>
          </div>
        </template>

        <el-table 
          :data="filteredReports" 
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="报告名称" min-width="200">
            <template #default="{ row }">
              <div class="report-name">
                <el-icon class="report-icon">
                  <Document />
                </el-icon>
                <div class="name-content">
                  <div class="name">{{ row.name }}</div>
                  <div class="description">{{ row.description }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type)" size="small">
                {{ getTypeLabel(row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)" size="small">
                {{ getStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column prop="size" label="文件大小" width="120">
            <template #default="{ row }">
              {{ row.size || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button-group>
                <el-button size="small" @click="viewReport(row)">
                  <el-icon><View /></el-icon>
                  查看
                </el-button>
                <el-button size="small" type="primary" @click="editReport(row)">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
                <el-button size="small" type="success" @click="shareReport(row)">
                  <el-icon><Share /></el-icon>
                  分享
                </el-button>
                <el-button size="small" type="warning" @click="downloadReport(row)">
                  <el-icon><Download /></el-icon>
                  下载
                </el-button>
                <el-button size="small" type="danger" @click="deleteReport(row)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="totalReports"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 新建报告对话框 -->
    <el-dialog
      v-model="showCreateDialog"
      title="新建报告"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form :model="reportForm" :rules="reportRules" ref="reportFormRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报告名称" prop="name">
              <el-input v-model="reportForm.name" placeholder="请输入报告名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告类型" prop="type">
              <el-select v-model="reportForm.type" placeholder="请选择报告类型" style="width: 100%">
                <el-option label="月度报告" value="monthly" />
                <el-option label="季度报告" value="quarterly" />
                <el-option label="年度报告" value="yearly" />
                <el-option label="自定义报告" value="custom" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="报告描述" prop="description">
          <el-input
            v-model="reportForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入报告描述"
          />
        </el-form-item>
        <el-form-item label="数据范围" prop="dateRange">
          <el-date-picker
            v-model="reportForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="包含内容">
          <el-checkbox-group v-model="reportForm.content">
            <el-checkbox value="overview">概览数据</el-checkbox>
            <el-checkbox value="trends">趋势分析</el-checkbox>
            <el-checkbox value="comparison">对比分析</el-checkbox>
            <el-checkbox value="predictions">预测分析</el-checkbox>
            <el-checkbox value="insights">智能洞察</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="模板选择">
          <el-radio-group v-model="reportForm.template">
            <el-radio value="default">默认模板</el-radio>
            <el-radio value="modern">现代模板</el-radio>
            <el-radio value="classic">经典模板</el-radio>
            <el-radio value="minimal">简约模板</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="submitReport" :loading="submitting">
            创建报告
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分享报告对话框 -->
    <el-dialog
      v-model="showShareDialog"
      title="分享报告"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="share-content">
        <div class="share-methods">
          <h4>分享方式</h4>
          <div class="method-list">
            <div class="method-item" @click="shareByEmail">
              <el-icon><Message /></el-icon>
              <span>邮件分享</span>
            </div>
            <div class="method-item" @click="shareByLink">
              <el-icon><Link /></el-icon>
              <span>链接分享</span>
            </div>
            <div class="method-item" @click="shareByQR">
              <el-icon><Picture /></el-icon>
              <span>二维码分享</span>
            </div>
            <div class="method-item" @click="shareByWeChat">
              <el-icon><ChatDotRound /></el-icon>
              <span>微信分享</span>
            </div>
          </div>
        </div>
        
        <div class="share-settings" v-if="shareMethod">
          <h4>分享设置</h4>
          <el-form :model="shareForm" label-width="100px">
            <el-form-item label="访问权限">
              <el-radio-group v-model="shareForm.permission">
                <el-radio value="public">公开访问</el-radio>
                <el-radio value="private">需要密码</el-radio>
                <el-radio value="expire">限时访问</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="有效期" v-if="shareForm.permission === 'expire'">
              <el-date-picker
                v-model="shareForm.expireDate"
                type="datetime"
                placeholder="选择过期时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="访问密码" v-if="shareForm.permission === 'private'">
              <el-input v-model="shareForm.password" placeholder="设置访问密码" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showShareDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmShare" :loading="sharing">
            确认分享
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  Document, Plus, Download, Clock, Check, Share, Search, Refresh,
  Delete, View, Edit, Message, Link, Picture, ChatDotRound
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const sharing = ref(false)
const searchQuery = ref('')
const statusFilter = ref('')
const typeFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const selectAll = ref(false)
const selectedReports = ref([])
const showCreateDialog = ref(false)
const showShareDialog = ref(false)
const shareMethod = ref('')
const reportFormRef = ref(null)

// 表单数据
const reportForm = ref({
  name: '',
  type: '',
  description: '',
  dateRange: [],
  content: ['overview'],
  template: 'default'
})

const shareForm = ref({
  permission: 'public',
  expireDate: null,
  password: ''
})

// 表单验证规则
const reportRules = {
  name: [
    { required: true, message: '请输入报告名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择报告类型', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入报告描述', trigger: 'blur' }
  ],
  dateRange: [
    { required: true, message: '请选择数据范围', trigger: 'change' }
  ]
}

// 模拟数据
const reports = ref([
  {
    id: 1,
    name: '2024年1月费用统计报告',
    description: '包含所有比赛项目的费用统计和趋势分析',
    type: 'monthly',
    status: 'completed',
    createdAt: '2024-01-15 10:30:00',
    size: '2.5MB',
    downloads: 15,
    shares: 8
  },
  {
    id: 2,
    name: 'Q4季度综合分析报告',
    description: '第四季度业务数据综合分析报告',
    type: 'quarterly',
    status: 'generating',
    createdAt: '2024-01-10 14:20:00',
    size: null,
    downloads: 0,
    shares: 0
  },
  {
    id: 3,
    name: '2023年度总结报告',
    description: '全年业务数据总结和来年规划',
    type: 'yearly',
    status: 'draft',
    createdAt: '2024-01-05 09:15:00',
    size: null,
    downloads: 0,
    shares: 0
  },
  {
    id: 4,
    name: '篮球比赛专项分析',
    description: '篮球比赛项目的专项数据分析和建议',
    type: 'custom',
    status: 'shared',
    createdAt: '2024-01-12 16:45:00',
    size: '1.8MB',
    downloads: 23,
    shares: 12
  }
])

// 计算属性
const totalReports = computed(() => reports.value.length)
const pendingReports = computed(() => reports.value.filter(r => r.status === 'generating').length)
const completedReports = computed(() => reports.value.filter(r => r.status === 'completed').length)
const sharedReports = computed(() => reports.value.filter(r => r.status === 'shared').length)

const filteredReports = computed(() => {
  let filtered = reports.value

  if (searchQuery.value) {
    filtered = filtered.filter(report => 
      report.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      report.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  if (statusFilter.value) {
    filtered = filtered.filter(report => report.status === statusFilter.value)
  }

  if (typeFilter.value) {
    filtered = filtered.filter(report => report.type === typeFilter.value)
  }

  return filtered
})

// 方法
const getTypeTagType = (type) => {
  const types = {
    monthly: 'primary',
    quarterly: 'success',
    yearly: 'warning',
    custom: 'info'
  }
  return types[type] || 'info'
}

const getTypeLabel = (type) => {
  const labels = {
    monthly: '月度报告',
    quarterly: '季度报告',
    yearly: '年度报告',
    custom: '自定义报告'
  }
  return labels[type] || type
}

const getStatusTagType = (status) => {
  const types = {
    draft: 'info',
    generating: 'warning',
    completed: 'success',
    shared: 'primary'
  }
  return types[status] || 'info'
}

const getStatusLabel = (status) => {
  const labels = {
    draft: '草稿',
    generating: '生成中',
    completed: '已完成',
    shared: '已分享'
  }
  return labels[status] || status
}

const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleString('zh-CN')
}

const createReport = () => {
  showCreateDialog.value = true
  reportForm.value = {
    name: '',
    type: '',
    description: '',
    dateRange: [],
    content: ['overview'],
    template: 'default'
  }
}

const submitReport = async () => {
  if (!reportFormRef.value) return
  
  try {
    await reportFormRef.value.validate()
    submitting.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const newReport = {
      id: Date.now(),
      name: reportForm.value.name,
      description: reportForm.value.description,
      type: reportForm.value.type,
      status: 'generating',
      createdAt: new Date().toLocaleString('zh-CN'),
      size: null,
      downloads: 0,
      shares: 0
    }
    
    reports.value.unshift(newReport)
    ElMessage.success('报告创建成功')
    showCreateDialog.value = false
  } catch (error) {
    ElMessage.error('请检查表单信息')
  } finally {
    submitting.value = false
  }
}

const viewReport = (report) => {
  ElMessage.info(`查看报告: ${report.name}`)
}

const editReport = (report) => {
  ElMessage.info(`编辑报告: ${report.name}`)
}

const shareReport = (report) => {
  showShareDialog.value = true
  shareMethod.value = ''
  shareForm.value = {
    permission: 'public',
    expireDate: null,
    password: ''
  }
}

const shareByEmail = () => {
  shareMethod.value = 'email'
  ElMessage.info('邮件分享功能')
}

const shareByLink = () => {
  shareMethod.value = 'link'
  ElMessage.info('链接分享功能')
}

const shareByQR = () => {
  shareMethod.value = 'qr'
  ElMessage.info('二维码分享功能')
}

const shareByWeChat = () => {
  shareMethod.value = 'wechat'
  ElMessage.info('微信分享功能')
}

const confirmShare = async () => {
  if (!shareMethod.value) {
    ElMessage.warning('请选择分享方式')
    return
  }
  
  sharing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('分享成功')
    showShareDialog.value = false
  } finally {
    sharing.value = false
  }
}

const downloadReport = (report) => {
  ElMessage.success(`开始下载: ${report.name}`)
}

const deleteReport = async (report) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除报告 "${report.name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = reports.value.findIndex(r => r.id === report.id)
    if (index > -1) {
      reports.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  } catch {
    // 用户取消删除
  }
}

const handleSelectionChange = (selection) => {
  selectedReports.value = selection
  selectAll.value = selection.length === filteredReports.value.length
}

const handleSelectAll = (val) => {
  if (val) {
    selectedReports.value = [...filteredReports.value]
  } else {
    selectedReports.value = []
  }
}

const batchDelete = async () => {
  if (selectedReports.value.length === 0) {
    ElMessage.warning('请选择要删除的报告')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedReports.value.length} 个报告吗？`,
      '批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedReports.value.map(r => r.id)
    reports.value = reports.value.filter(r => !ids.includes(r.id))
    selectedReports.value = []
    selectAll.value = false
    ElMessage.success('批量删除成功')
  } catch {
    // 用户取消删除
  }
}

const batchExport = () => {
  ElMessage.info('批量导出功能')
}

const refreshData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('数据已刷新')
  }, 1000)
}

const resetFilters = () => {
  searchQuery.value = ''
  statusFilter.value = ''
  typeFilter.value = ''
  currentPage.value = 1
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.reports-container {
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  min-height: 100vh;
}

.page-header {
  margin-bottom: var(--spacing-xl);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.title-section {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.title-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* 统计卡片 */
.stats-section {
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: var(--spacing-xl);
}

.filter-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.filter-left {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.filter-right {
  display: flex;
  gap: var(--spacing-md);
}

/* 报告列表 */
.reports-list {
  margin-bottom: var(--spacing-xl);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.selected-count {
  color: var(--primary-color);
  font-size: 0.9rem;
}

.report-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.report-icon {
  font-size: 1.2rem;
  color: var(--primary-color);
}

.name-content {
  flex: 1;
}

.name {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.description {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
}

/* 分享对话框 */
.share-content {
  padding: var(--spacing-lg) 0;
}

.share-methods h4,
.share-settings h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.method-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-item:hover {
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.05);
  transform: translateY(-2px);
}

.method-item .el-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.method-item span {
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .reports-container {
    padding: var(--spacing-md);
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .filter-content {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-left {
    flex-direction: column;
  }

  .search-input {
    width: 100%;
  }

  .stat-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .method-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.5rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .method-list {
    grid-template-columns: 1fr;
  }
}
</style>
